<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<html>
<head>
	<title>Title</title>
	<jsp:include page="/layout/_import.jsp"></jsp:include>

	<style>
		.invalid {
			color: red;
		}
	</style>
</head>
<body>
<jsp:include page="/layout/_nav.jsp"></jsp:include>
<div class="container">
	<main role="main" class="pb-3">
		<form method="post" novalidate="novalidate" enctype="multipart/form-data">
			<div class="form-group row">
				<label class="col-sm-2" for="name">宠物照片</label>
				<div class="col-sm-10">
					<input type="file" name="photo">
				</div>
			</div>
			<div class="form-group row">
				<label class="col-sm-2" for="name">宠物名</label>
				<div class="col-sm-10">
					<input class="form-control" type="text" data-val="true" data-val-maxlength="宠物名大小不能超过20" data-val-maxlength-max="20" data-val-required="宠物名是必须的" id="name" maxlength="20" name="name">
					<span class="invalid field-validation-valid" data-valmsg-for="name" data-valmsg-replace="true"></span>
				</div>
			</div>

			<div class="form-group row">
				<label class="col-sm-2" for="birth">宠物生日</label>
				<div class="col-sm-10">
					<input class="form-control" type="date" data-val="true" data-val-required="宠物生日是必要的" id="birth" name="birth">
					<span class="invalid field-validation-valid " data-valmsg-for="birth" data-valmsg-replace="true"></span>
				</div>
			</div>

			<div class="form-group row">
				<label class="col-sm-2" for="owner">主人</label>
				<div class="col-sm-10">
					<input class="form-control" type="text" list="owners" data-val="true" data-val-maxlength="名字的长度不能大于20" data-val-maxlength-max="100" data-val-required="宠物的主人是必要的" id="owner" maxlength="20" name="owner">
					<datalist id="owners">
						<c:forEach items="${users}" var="u">
							<c:if test="${u.role != 'admin'}">
								<option value="${u.name}"></option>
							</c:if>
						</c:forEach>
					</datalist>
					<span class="invalid field-validation-valid" data-valmsg-for="owner" data-valmsg-replace="true"></span>
				</div>
			</div>


			<button type="submit" class="btn btn-primary">添加</button>
			<a class="btn btn-secondary" href="/petmanage">返回列表</a>
	</main>
</div>
<script src="https://cdn.bootcss.com/jquery-validate/1.19.1/jquery.validate.min.js"></script>
<script src="https://cdn.bootcss.com/jquery-validation-unobtrusive/3.2.11/jquery.validate.unobtrusive.min.js"></script>
</body>
</html>
